<template>
    <div class = 'cdetail'>
        <div v-if = 'iswait' class = 'wait'>
            <waiting></waiting>
        </div>
        <div class = 'Ctop' v-if = '!iswait'>
             <div class = 'back'>
                <div @click = '$router.go(-1)' v-if = '!$route.query.Cname'><span><i class='iconfont icon-youjiantou'></i></span></div>
                <router-link :to = '{path:"/cinema",query:{name:$route.query.Cname,id:$route.query.Cid}}'>
                    <div v-if = '$route.query.Cname'><span><i class='iconfont icon-youjiantou'></i></span></div>
                </router-link>
            </div>    
            <span>{{cinemaDetail.nm}}</span>
        </div>    
        <div class = 'Cbody' v-if = '!iswait'>
            <div class = 'Cimg'>
                <img :src = 'cinemaDetail.headImg'>
            </div>
            <div class = 'Ctext'>
                <div class = 'text'>
                    <div class = 't-left'><i>地址:</i></div>
                    <div class = 't-content'>{{cinemaDetail.addr}}</div>
                </div>
                <div class = 'text'>
                    <div class = 't-left'><i>电话:</i></div>
                    <div class = 't-content'>{{cinemaDetail.tel}}</div>
                </div>
            </div>
        </div>
        <div class="time" v-if = '!iswait'>
            <div @click="timeClick(0,today)" :class="{active : dateRecord.flag==0}">{{today.month}}月{{today.day}}日</div>
            <div @click="timeClick(1,tomorrow)" :class="{active : dateRecord.flag==1}">{{tomorrow.month}}月{{tomorrow.day}}日</div>
            <div @click="timeClick(2,nextDay)" :class="{active : dateRecord.flag==2}">{{nextDay.month}}月{{nextDay.day}}日</div>
        </div>
        <div class="Cmovie" v-if = '!iswait'>
            <ul>
                <li v-for="(item,index) in clickArr" v-bind:key='index' v-show="!isshow">
                    <router-link :to="{path : '/buyTicket',query:{cinemaId : detailId,cinemaName : cinemaDetail.nm,movieId : item.id,movieName : item.nm,time:dateRecord.date.str}}">
                        <div class="photo">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="text">
                            <div class="movieName">{{item.nm}}</div>
                            <div class="moviedesc">
                                <span>简介:</span>{{item.desc}}
                            </div>
                            <div class="score">
                                <span>评分 ：</span>{{item.sc}}
                            </div>
                            <div class="wish">
                                <span>{{item.wish}}</span>人想看
                            </div>
                        </div>
                    </router-link>
                </li>
                <li class="nodata" v-show="clickArr.length == 0&&!isshow">
                    暂无数据
                </li>
                <div class="showWait" v-if="isshow">
                    加载中...
                </div>
            </ul>
        </div>
        <div class="nomore" v-if = '!iswait'>
            没有更多了~
        </div>
        <!-- <div class = 'Cbottom' v-if = '!iswait'>
            <div>
                开通会员
            </div>
        </div> -->
    </div>    
</template>
<script>
import waiting from '@/components/waiting.vue';
export default {
    data(){
        return {
            cinemaDetail : [],
            detailId : 0,
            detailName : '',
            cityId : 0,
            iswait : true,
            cinemaMovie : [],
            today : '',
            tomorrow : '',
            nextDay : '',
            moviesArr : [],
            dateRecord : {},
            isshow : false,
            clickArr : [],
        }
    },
    components:{
        waiting,
    },
    methods:{
        getDetail(id,cid){
             axios.get(`https://apis.netstart.cn/maoyan/cinema/detail?cinemaId=${id}`)
           .then(
                data=> {
                    this.cinemaDetail = data.data.data;
                    axios.get(`https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=${id}&ci=${cid}&channelId=4`)
                    .then(
                        data=> {
                            // console.log(data.data)
                            this.cinemaMovie = data.data.data.movies;
                            // console.log(this.cinemaMovie)
                            this.cinemaMovie.forEach(element => {
                                element.img = element.img.replace('w.h','170.170')
                            });
                            this.iswait = false;
                            // this.getDayMovie('2022-02-16')
                            this.moviesArr[0] = this.getDayMovie(this.today.str)
                            this.moviesArr[1] = this.getDayMovie(this.tomorrow.str)
                            this.moviesArr[2] = this.getDayMovie(this.nextDay.str);
                            this.clickArr = this.moviesArr[0];
                            // console.log(this.moviesArr)
                        }
                    )
                }
            )
            
        },
        getDate(){
            let today = new Date();
            let tomorrow = new Date(today.getTime() + 24*60*60*1000);
            let nextDay = new Date(tomorrow.getTime() + 24*60*60*1000);
            this.today = this.getDateString(today);
            this.tomorrow  = this.getDateString(tomorrow);
            this.nextDay = this.getDateString(nextDay);
            this.dateRecord = {
                flag : 0,
                date : this.today
            }
            // console.log(this.today)
        },
        getDateString(date){
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            let m = month>9 ? month : '0'+month;
            let d = day>9 ? day : '0'+day;
            let str = `${year}-${m}-${d}`;
            return {str,year,month,day};
        },
        getDayMovie(date){
            // console.log(date);
            let arr = [];
            this.cinemaMovie.forEach(element => {
                for(let i = 0;i<element.shows.length;i++){
                    // console.log(element.shows[i].showDate)
                    if(date == element.shows[i].showDate){
                        arr.push(element);
                        break;
                    }
                }
            });
            // console.log(arr);
            return arr
        },
        timeClick(index,day){
            this.dateRecord.flag = index;
            this.dateRecord.date = day;
            this.isshow = true;
            this.clickArr = this.moviesArr[index];
            let timeout = setTimeout(() => {
                    this.isshow = false;
                    clearTimeout(timeout);
            }, 300);
        }
    },
    created(){
        this.detailId = this.$route.query.id;
        this.detailName = this.$route.query.Cname;
        this.cityId = this.$route.query.Cid;
        this.getDetail(this.detailId,this.cityId);
        this.getDate();
    }

}
</script>
<style lang='scss' scoped>
@import '../assets/font/font_icon/iconfont.css';
.cdetail{
    position:absolute;
    width : 100%;
    min-height:100%;
    background-color : #f4f4f4;
    z-index : 100;
    font-size : 18px;
    .wait{
        font-size : 21px;
        height : 300px;
        line-height : 300px;
        text-align : center;
        color :grey;
    }
    .Ctop{
        background-color : white;
        height : 50px;
        line-height : 50px;
        text-align : center;
        padding: 0 60px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        .back{
            position:absolute;
            top : 10px;
            left : 10px;
            width : 30px;
            height : 30px;
            background-color :  #f4f4f4;
            border-radius : 50%;
            text-align : center;
            line-height : 30px;
            transform : rotateY(180deg);
            span{
                display : block;
                i{
                    font-size : 23px;
                    color : #FF9900;
                }
            }
        }
        span{
            font-size : 18px;
        }
    }
    .Cbody{
        background-color : white;
        margin-top : 2px;
        // margin-bottom : 60px;
        .Cimg{
            width:100%;
            max-height: 300px;
            overflow: hidden;
            display: flex;
            img{
                width : 100%;
                display: block;
                
            }
        }
        .Ctext{
            background-color : white;
            .text{
                margin : 2px 0px;
                padding  : 10px;
                box-sizing : border-box; 
                &::after{
                    content : '';
                    display : block;
                    clear : both;
                }
                div{
                    float : left;
                    min-height : 20px;
                    line-height : 20px;
                    // margin-bottom : 15px;
                }
                .t-left{
                    width : 20%;
                    font-size : 20px;
                    color : black;
                }
                .t-content{
                    width : 80%;
                    font-size : 16px;
                    color : #3e606f;
                }
            }
        }
    }
    .time{
        display: flex;
        justify-content: space-around;
        margin: 10px 0 1px;
        padding: 10px;
        background: white;
        >div{
            flex-basis: 30%;
            text-align: center;
            padding: 6px;
        }
        .active{
            color : orange;
            border-bottom: 1px solid orange;
        }
    }
    .Cmovie{
        background: white;
            ul{
                padding: 10px;
                li{
                    margin-bottom: 10px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #eee;
                    a{
                        display: flex;
                        .photo{
                            flex-basis: 40%;
                            img{
                                display: block;
                                width: 100%;
                                margin: 0 auto;
                            }
                        }
                        .text{
                            flex-basis: 60%;
                            // padding: 10px 0;
                            // box-sizing: border-box;
                            div{
                                margin: 10px 0;
                            }
                            .movieName{
                                padding-left: 5px;
                                box-sizing: border-box;
                                color:#000;
                                font-weight: bolder;
                            }      
                            .moviedesc{
                                padding-left: 5px;
                                box-sizing: border-box;
                                color : #004358;
                                span{
                                    font-size: 16px;
                                    color : grey;
                                }
                            }
                            .score{
                                padding-left: 5px;
                                box-sizing: border-box;
                                color : orange;
                                span{
                                    font-size: 16px;
                                    color : grey;
                                }
                            }   
                            .wish{
                                padding-left: 5px;
                                box-sizing: border-box;
                                span{
                                    font-size: 16px;
                                    color : grey;
                                }
                            }
                        }
                    }
                }
                .showWait{
                    height: 600px;
                    text-align: center;
                    line-height: 200px;

                }
                .nodata{
                    padding-top: 10px;

                }
            }
    }
    .nomore{
        height: 40px;
        line-height: 40px;
        text-align: center;
        color : grey;
    }
    .Cbottom{
        position : fixed;
        bottom : 0 ;
        height : 60px;
        background-color : white;
        width : 100%;
        padding : 5px 10px;
        box-sizing : border-box; 
        >div{
            background-color : #ff9900;
            height : 100%;
            color : white;
            line-height : 50px;
            text-align : center;
            border-radius : 4px;
        }
    }
    
}
</style>